<style type="text/css">
    .input-group-addon{padding: 0px 12px!important;height: 40px!important;line-height: 40px;}
    .panel .panel-body{padding-top: 0px;}
    /*table.dataTable thead > tr > th{width: 200px!important;}*/
    .control-label{font-weight: 500}
    .btn-primary{min-width: 120px;padding-top: 10px;padding-bottom: 10px;border-radius: 5px;font-size: 17px;}

    .E8ECEE{background: #E8ECEE!important;border:1px solid #979797!important;}
    .Label_btn{padding-bottom: 20px;}
    .Label_btnspan,.chose_li{background: #fff;border:1px solid #ccc;padding:5px 20px;margin-right: 20px;display: inline-block;border-radius: 5px;cursor: pointer;}
    .select2-choices{background-color: #fafafa;border: 1px solid #eee;font-size: 17px;border-radius: 5px;border-top-left-radius: 0;border-bottom-left-radius: 0;cursor: pointer;list-style: none;padding-left: 10px;}
    .chose_li{padding: 0px 20px;height: 30px;line-height: 30px;font-size: 14px;}
    .chose_li span{font-size: 12px!important;margin-left: 5px;}


  /*  .table-bordered>tbody>tr>td, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>td, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>thead>tr>th{padding: 0px 5px;}*/
    table.dataTable thead > tr > th.widht{width: 170px!important;}
    table.dataTable thead > tr > th.widht100{width: 105px!important;}
    table.dataTable thead > tr > th.widht200{width: 200px!important;}
    table.dataTable thead > tr > th.widht130{width: 120px!important;}
    table.dataTable thead > tr > th.widht150{width: 150px!important;}
    /*.limit_two{margin-bottom: 10px;padding-top: 10px!important;}*/
    /*table.dataTable thead > tr > th.remark{width: 160px!important; }*/
   
    /*table{word-break: break-all; word-wrap: break-word;}*/
    table{table-layout: fixed;word-break: break-all; word-wrap: break-word;}
    .table-bordered>tbody>tr>td.ll{
         overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
         padding:15px 5px;
    }
    .search_input_cont{border-bottom: 0px;}


    
    #datatable_wrapper{border:0px;}

    .tab-content{padding: 0px!important;margin:0px!important;}
    .col-xs-12{padding: 0px!important;}
    .search_condbtn  button{margin-top: -4px;}
    table.table-bordered.dataTable{border: 1px solid #DDDDDD;}
    table.dataTable thead > tr > th{border-top: none!important;}
    .tab_tables_border{border: none;}
     /*修改tab 切换*/
    }
   /* .nav.nav-tabs{border-bottom: 1px solid #f4f4f4;margin-bottom: 20px;background:#F6F6F6}
    .nav-tabs>li{margin-bottom: -2px;}
    .nav.nav-tabs>li>a{background-color: #F6F6F6;border-top: 0px;padding:10px;margin-right: 0px;font-size: 18px;color:#797979;}
    .nav.nav-tabs>li.active>a, .tabs-vertical-env .nav.tabs-vertical li.active>a{border-bottom: 2px solid #333;border-top: 0px;color: #000;background-color: #F6F6F6;}
    .nav.nav-tabs>li{position:relative;padding: 0px 20px;}
    .nav.nav-tabs>li::after{content: '';border-right: 1px solid #EEEEEE;position: absolute;right: 0px;top: 14px;height: 20px;width: 2px;}
    .nav-tabs>li.active{margin-top: 0px;}*/

</style>
<div class="page-title q-tit-change" style="margin:10px;"> 
    <a href="order/index">订单管理</a> > 订单列表
</div> 
<div class="row" style="margin:0px;">
    <div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="search_input_cont">
                    <div class="search_litile_tit"><span class="tit_diswidth"></span>搜索条件</div>
                    <div class="search_condition overflow">
                            
                            <div class="input-group col-md-3 m-b-10">
                                <span class="input-group-addon">下单手机号:</span>
                                <input type="text" id="example-input1-group1" name="example-input1-group1" class="form-control Phone" placeholder="请输入手机号码">
                            </div>
                            <div class="input-group col-sm-3 m-b-10">
                                <span class="input-group-addon">下单名字:</span>
                                <input type="text" id="example-input1-group1" name="example-input1-group1" class="form-control TrueName" placeholder="请输入客户名字">
                            </div>
                           
                            <div class="input-group col-sm-3 m-b-10">
                                <span class="input-group-addon">订单状态:</span>
                                <select class="input-group-select form-control OrderStatus">
                                    <option value="">--请选择--</option>
                                    <option value="2100">已报名待参加</option>
                                    <option value="5000">已完成</option>
                                    <option value="-3">已失效</option>
                                </select>
                            </div>
                            <div class="input-group col-sm-3 m-b-10">
                                <span class="input-group-addon">软文标题:</span>
                                <input type="text" id="example-input1-group1" name="example-input1-group1" class="form-control Title" placeholder="请输入软文标题">
                            </div>

                            <div class="input-group col-sm-3 m-b-10 TimeCont">
                                <span class="input-group-addon">订单时间:</span>
                                <input type="text" id="StartTime" name="example-input1-group1" class="form-control StartTime" placeholder="请输入开始时间" readonly>
                                <span class="input-group-addon">至</span>
                                <input type="text" id="EndTime" name="example-input1-group1" class="form-control EndTime" placeholder="请输入结束时间" readonly>
                            </div>

                            <!-- <div class="input-group col-sm-3 m-b-10 TimeCont TimeContChange" style="display: none;">
                                <span class="input-group-addon tit">预约时间:</span>
                                <input type="text" id="StartProTime" name="example-input1-group1" class="form-control StartTime" placeholder="请输入开始时间" readonly>
                                <span class="input-group-addon">至</span>
                                <input type="text" id="EndProTime" name="example-input1-group1" class="form-control EndTime" placeholder="请输入结束时间" readonly>
                            </div> -->
                            <div class="input-group col-sm-3 m-b-10">
                                <span class="input-group-addon">查询码:</span>
                                <input type="text" id="example-input1-group1" name="example-input1-group1" class="form-control AdOrderSearchCD" placeholder="请输入查询码">
                            </div>
                            <div class="input-group col-sm-3 m-b-10 aaa" style="font-style: normal;">
                                <!-- <div class="input-group col-md-3 m-b-10 AdMarketTypeCont overflow" > -->
                                    <span class="input-group-addon">营销类型:</span>
                                    <select class="input-group-select form-control AdMarketType">
                                        <option value="">--请选择--</option>
                                        <option value="100">新品</option>
                                        <option value="200">团购</option>
                                    </select>
                                <!-- </div> -->
                            </div>
                            
                            <div class="col-sm-3" ></div>
                            <div class="search_condbtn col-sm-3" style="text-align: right;">
                                <button class="btn btn-primary m-r-10" type="button" id="btnSearch">
                                    <i class="fa fa-search"></i> 查  询
                                </button>
                                <button class="btn  btn-primary changebgr" type="reset" id="btnRefresh">
                                    <i class="fa fa-refresh"></i> 重  置
                                </button>
                            </div>
                        </div>
                    </div>
                    <!-- <div class="search_condbtn " style="height: 65px;"> -->
                        <!-- <div class="col-sm-3" style="width: 30%;margin-right: 30px;"></div> -->
                        <!-- <p class="search_condbtn" style="text-align: right;">
                            <button class="btn btn-primary m-r-10" type="button" id="btnSearch">
                                <i class="fa fa-search"></i> 查  询
                            </button>
                            <button class="btn  btn-primary " type="reset" id="btnRefresh">
                                <i class="fa fa-refresh"></i> 重  置
                            </button>
                        </p> -->
                    <!-- </div> -->
                </div>
                <div class="tab_tables_border">
                    <ul class="nav nav-tabs"> 
                        <li  class="active"> 
                            <a href="#sale" data-toggle="tab" aria-expanded="false" data-type="100"> 
                                <span class="hidden-xs">销售订单列表</span> 
                            </a> 
                        </li> 
                        <li> 
                            <a href="#profile" data-toggle="tab" aria-expanded="true" data-type="200"> 
                                <span class="hidden-xs">预约订单列表</span> 
                            </a> 
                        </li> 
                        <li> 
                            <a href="#active" data-toggle="tab" aria-expanded="true" data-type="300"> 
                                <span class="hidden-xs">活动订单列表</span> 
                            </a> 
                        </li> 
                    </ul>
                    <div class="tab-content overflow">
                        <div class="tab-pane active" id="sale">
                            <div class="col-md-12 col-sm-12 col-xs-12">
                                <table id="datatable1" class="table table-striped table-bordered">
                                    <thead>
                                        <tr>
                                            <th class="widht">订单号</th>
                                            <th class="widht100">订单状态</th>
                                            <th class="">软文标题</th>
                                            <th class="widht150">下单时间</th>
                                            <th class="widht130">姓名</th>
                                            <th class="widht130">手机号</th>
                                            <th class="widht130">成交渠道</th>
                                            <th class="widht100">下单金额</th>
                                            <th class="widht100">支付方式</th>
                                            <th>支付流水</th>
                                            <th class="widht150">操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <!-- <tr>
                                            <td>Tiger Nixon</td>
                                            <td>System Architect</td>
                                            <td>Edinburgh</td>
                                            <td>61</td>
                                            <td>2011/04/25</td>
                                            <td>$320,800</td>
                                            <td>$320,800</td>
                                            <td class="option_btn" >
                                                <span   data-toggle="modal" data-target="#con-close-modal" data-toggle="tooltip" >查看</span>
                                                <span>编辑</span>
                                                <span>删除</span>
                                            </td>
                                        </tr> -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="tab-pane" id="profile">
                            <div class="col-md-12 col-sm-12 col-xs-12">
                                <table id="datatable2" class="table table-striped table-bordered">
                                    <thead>
                                       <tr>
                                            <th>订单号</th>
                                            <th>订单状态</th>
                                            <th>下单时间</th>
                                            <th>软文标题</th>
                                            <th >姓名</th>
                                            <th >手机号</th>
                                            <th >预约时间</th>
                                            <th >预约人员/项目</th>
                                            <th>预约来源</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="tab-pane" id="active">
                            <div class="col-md-12 col-sm-12 col-xs-12">
                                <table id="datatable3" class="table table-striped table-bordered">
                                    <thead>
                                        <tr>
                                            <th>订单号</th>
                                            <th>订单状态</th>
                                            <th>下单时间</th>
                                            <th>软文标题</th>
                                            <th>姓名</th>
                                            <th >手机号</th>
                                            <th>报名时间</th>
                                            <th>报名来源</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <!-- <tr>
                                            <td>Tiger Nixon</td>
                                            <td>System Architect</td>
                                            <td>Edinburgh</td>
                                            <td>61</td>
                                            <td>2011/04/25</td>
                                            <td>$320,800</td>
                                            <td>$320,800</td>
                                            <td class="option_btn" >
                                                <span   data-toggle="modal" data-target="#con-close-modal" data-toggle="tooltip" >查看</span>
                                                <span>编辑</span>
                                                <span>删除</span>
                                            </td>
                                        </tr> -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div> <!-- End Row -->


<!-- 详情 -->
<div id="custom-width-modal" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="custom-width-modalLabel" aria-hidden="true" style="display: none; padding-right: 17px;">
    <div class="modal-dialog" style="width:55%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="custom-width-modalLabel">订单详情</h4>
            </div>
            <div class="modal-body order_detial_all">
                <!-- <div class="row">
                    <div class="col-sm-2 order_detial_des">订单号：</div>
                    <div class="col-sm-10 order_detial_cont">20170331001020AA0</div>
                </div>
                <div class="row">
                    <div class="col-sm-2 order_detial_des">订单状态：</div>
                    <div class="col-sm-10 order_detial_cont">已完成</div>
                </div>
                <div class="row">
                    <div class="col-sm-2 order_detial_des">下单时间：</div>
                    <div class="col-sm-10 order_detial_cont">12132</div>
                </div>
                <div class="row">
                    <div class="col-sm-2 order_detial_des">软文标题：</div>
                    <div class="col-sm-10 order_detial_cont">客厅装饰画 现代简约无框画沙发背景墙三联画壁画挂画家和万事兴</div>
                </div>
                <div class="row">
                    <div class="col-sm-2 order_detial_des">姓名：</div>
                    <div class="col-sm-10 order_detial_cont">杜元礼</div>
                </div>
                <div class="row">
                    <div class="col-sm-2 order_detial_des">手机号：</div>
                    <div class="col-sm-10 order_detial_cont">18217093207</div>
                </div>
                <div class="row">
                    <div class="col-sm-2 order_detial_des">成交渠道：</div>
                    <div class="col-sm-10 order_detial_cont">微信</div>
                </div>
                <div class="row">
                    <div class="col-sm-2 order_detial_des">下单金额：</div>
                    <div class="col-sm-10 order_detial_cont">&yen;50</div>
                </div>
                <div class="row">
                    <div class="col-sm-2 order_detial_des">支付方式：</div>
                    <div class="col-sm-10 order_detial_cont">微信</div>
                </div>
                <div class="row">
                    <div class="col-sm-2 order_detial_des">支付流水：</div>
                    <div class="col-sm-10 order_detial_cont">20170331001020AA0</div>
                </div> -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>


<script src="/modules/assets/modal-effect/js/classie.js"></script>
<script src="/modules/assets/modal-effect/js/modalEffects.js"></script>
<!-- <script src="/modules/js/address/Area.js"></script> -->
<!-- <script src="/modules/js/address/AreaData_min.js"></script> -->
<!-- 时间选择插件 -->
<link rel="stylesheet" type="text/css" href="/modules/assets/timepicker/bootstrap-timepicker.min.css">
<script src="/modules/assets/timepicker/bootstrap-timepicker.min.js"></script>
<script src="/modules/assets/timepicker/bootstrap-timepicker.min-zn.js"></script>



<script type="text/javascript">
    $(document).ready(function(){
        //初始化日期控件
        $("#StartTime").datetimepicker({
            language: 'zh-CN',
            format: "yyyy-mm-dd hh:ii",
            weekStart: 1,
            todayBtn: 1,
            autoclose: 1,
            todayHighlight: 1,
            startView: 2,
            forceParse: 0,
            showMeridian: 1
        });
        //初始化日期控件
        $("#EndTime").datetimepicker({
            language: 'zh-CN',
            format: "yyyy-mm-dd hh:ii",
            weekStart: 1,
            todayBtn: 1,
            autoclose: 1,
            todayHighlight: 1,
            startView: 2,
            forceParse: 0,
            showMeridian: 1
        });
        
    });
    seajs.use('order/index');
</script>